<template>
	<view class="customer_service_center">
		<uni-collapse ref="collapse" v-model="collapseCurrent">
			<uni-collapse-item :title="item.ask" v-for="(item, index) in collapseList" :key="index">
				<view class="content">
					<text class="text">{{ item.answer }}</text>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<!-- #ifdef MP-ALIPAY -->
		<view class="online-service">
			<contact-button tnt-inst-id="aV0_S7oH" scene="SCE01270193" icon="/static/other/online-service.png"
				size="68*68px" />
		</view>
		<!-- #endif -->
		<view class="bottom_btnBox">
			<!-- #ifndef MP-ALIPAY || MP-KUAISHOU -->
			<button class="bottom_btn" open-type="contact">在线客服</button>
			<!-- #endif -->
			<view class="bottom_btn" @tap="toQMessage">问题留言</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	const collapseCurrent = ref(0);

	const collapseList = ref([]);

	onLoad(() => {
		getList();
	})

	function getList() {
		uni.showLoading({
			title: '加载中',
			mask: false
		})
		uni.$request('/api/busi/question/select').then((res) => {
			if (res.status == 200) {
				collapseList.value = res.data.questionList;
			}
			uni.hideLoading();
		}).fail((err) => {
			uni.hideLoading();
			uni.showToast({
				icon: 'error',
				title: '延迟请重试！'
			})
		})
	}

	function toQMessage() {
		uni.navigateTo({
			url: '/pages/my/questionMessage'
		})
	}
</script>

<style lang="less" scoped>
	.customer_service_center {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding: 32rpx 0 210rpx;
		box-sizing: border-box;
	}

	.content {
		padding: 32rpx;
	}

	.bottom_btnBox {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 212rpx;
		width: 100vw;
		border-radius: 32rpx 32rpx 0 0;
		background: rgba(255, 255, 255, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20rpx;
		box-sizing: border-box;
		padding: 32rpx 32rpx 68rpx 32rpx;
	}

	.bottom_btn {
		flex: 1;
		width: 46%;
		opacity: 1;
		border-radius: 200rpx;
		background: rgba(69, 145, 230, 1);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 32rpx 0 32rpx;
		font-size: 32rpx;
		font-weight: 500;
		letter-spacing: 0;
		line-height: 47rpx;
		color: rgba(255, 255, 255, 1);
		margin: 0;
		&::after {
			border: none;
		}
	}

	/* #ifdef MP-ALIPAY */
	.online-service {
		position: fixed;
		top: 840rpx;
		right: 32rpx;
	}

	/* #endif */
</style>